<template>
  <div>
    <div class="refundDetails">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">售后详情</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i class="mint-toast-icon mintui mintui-search"></i>
            </label>
          </button>
        </div>
      </header>
      <div class="status">
        <h3>{{returnDetails.returnStatus|returnStatus}}</h3>
        <p v-if="returnDetails.returnStatus == 1">
          <span>注意事项：</span>
          <span style="width:75%;margin-left:10px;">如果仓库拒绝退款协议，请与客服沟通具体原因，再根据双方的协议结果，重新修改退款协议提交。退款成功后，最终退款金额将 原路退还至您的付款账户中。</span>
        </p>
      </div>
      <div class="bgc-box" v-if="returnDetails.returnStatus == 3||returnDetails.returnStatus == 8">
        <h3>退货物流凭证</h3>
        <p>
          <span>退货时间：</span>2017-08-22</p>
        <p>
          <span>物流公司：</span>申通快递</p>
        <p>
          <span>运单号：</span>40280469854</p>
      </div>
      <div class="bgc-box" v-if="returnDetails.returnStatus == 5">
        <p>
          <span>拒绝原因：</span>无法退还</p>
      </div>
      <div class="orderGoods">
        <div class="orderIndex">
          <div class="c-title">{{returnDetails.supplierWarehouse}}
          </div>
          <div class="c-order">
            <div class="order-mid">
              <p>{{returnDetails.sellingPoints}}</p>
              <span>货号：{{returnDetails.goodsCode}}</span><br>
              <span v-if="!returnDetails.sizeAlias">尺码：{{returnDetails.goodsSpec}}</span>
              <span v-if="returnDetails.sizeAlias">尺码：{{returnDetails.goodsSpec}}({{returnDetails.sizeAlias}})</span>
            </div>
            <img :src="returnDetails.goodsImg" alt="" class="pic">
            <div class="order-right">
              <p>￥{{returnDetails.goodsDiscountPrice|formatMoney}}</p>
              <span class="count">￥{{returnDetails.goodsMoney|formatMoney}}</span><br>
              <span>x{{returnDetails.returnNum}}</span>
            </div>
          </div>
          <div class="price">
            <p>
              售后金额
              <span>（含运费￥{{returnDetails.returnFreight|formatMoney}}）</span>
              <span style="float:right;color:#F60;font-size:14px;">￥{{returnDetails.returnPrice|formatMoney}}</span>
            </p>
          </div>
          <div class="tell-box">
            <div class="tell">拨打商户电话</div>
          </div>
        </div>
      </div>
      <div class="info">
        <h3>售后协议</h3>
        <p>
          <span class="left">申请售后时间</span>
          <span class="right">{{returnDetails.createDate|formatDate( 'yyyy-MM-dd')}}</span>
        </p>
        <p>
          <span class="left">售后编号</span>
          <span class="right">{{returnDetails.returnCode}}</span>
        </p>
        <p>
          <span class="left">订单号</span>
          <span class="right">{{returnDetails.orderCode}}</span>
        </p>
        <p>
          <span class="left">货品情况</span>
          <span class="right">{{returnDetails.returnGoodsStatus|returnGoodsStatus}}</span>
        </p>
        <p>
          <span class="left">申请售后原因</span>
          <span class="right">{{returnDetails.returnReason}}</span>
        </p>
        <p>
          <span class="left">退款金额</span>
          <span class="right">￥{{returnDetails.returnPrice|formatMoney}}</span>
        </p>
        <p>
          <span class="left">退还运费</span>
          <span class="right">￥{{returnDetails.returnFreight|formatMoney}}</span>
        </p>
        <p class="explain">
          <span class="left">申请售后说明</span>
          <span class="right">{{returnDetails.returnNote}}</span>
        </p>
        <div class="proof">
          <span>凭证</span>
          <div class="imgList">
            <div class="imgBox" v-for="(item,index) in returnDetails.returnImgList" :key="index">
              <img :src="item.returnImg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="btn-box" v-if="returnDetails.returnStatus != 6&&returnDetails.returnStatus != 8">
        <button style="border-right:1px solid #E0E6EA;" @click="change">修改退款协议</button>
        <button @click="revoke">撤销退款申请</button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getReturnDetails,
  revokeReturnGoods
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import { MessageBox, Toast } from 'mint-ui'
export default {
  data() {
    return {
      flag: false,
      returnDetails: {}
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.fetchData()
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  filters: {
    returnGoodsStatus(val) {
      return val === 0 ? '' : val === 1 ? '没有收到货品' : val === 2 ? '买家已收到货' : '未知'
    },
    returnStatus(val) {
      return val === 0 ? '' : val === 1 ? '售后协议等待平台确认' : val === 2 ? '同意退款协议，等待退货' : val === 3 ? '已退货，等待仓库收货' : val === 4 ? '已确认' : val === 5 ? '退款协议被拒绝，等待买家修改' : val === 6 ? '买家已撤销售后申请' : val === 7 ? '待退款' : val === 8 ? '退款成功' : '未知'
    }
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id,
        returnId: this.$route.query.returnId
      }
      getReturnDetails(formData).then(res => {
        this.returnDetails = res.data.returnDetails
      })
    },
    revoke() {
      MessageBox.confirm('确定撤销该售后?').then(action => {
        revokeReturnGoods({
          userId: this.userInfo.id,
          returnId: this.$route.query.returnId
        }).then(res => {
          Toast('售后申请已撤销')
          this.fetchData()
        })
      })
    },
    change() {
      this.$router.replace({
        name: 'fillRefundInfo',
        query: {
          orderId: this.returnDetails.orderId,
          orderGoodsId: this.returnDetails.orderGoodsId,
          returnId: this.returnDetails.id
        }
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.refundDetails {
  min-height: 100vh;
  margin-top: 45px;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #E8ECEF;
  }
  .status {
    background-color: #fff;
    padding: 15px;
    h3 {
      color: #F60;
      font-size: 14px;
      margin-bottom: 15px;
    }
    p {
      overflow: hidden;
      line-height: 20px;
      span {
        float: left;
        color: #A9A9A9;
      }
    }
  }
  .bgc-box {
    background-color: #FFF9D7;
    padding: 15px;
    line-height: 20px;
    p {
      color: #A1A1A1;
      span {
        float: left;
        width: 20%;
      }
    }
  }
  .orderGoods {
    margin-bottom: 15px;
    .orderIndex {
      background-color: #fff;
      margin-top: 10px;
      .c-title {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }
      .c-order {
        padding: 10px 100px;
        background-color: rgb(252, 252, 252);
        overflow: hidden;
        margin-bottom: 3px;
        .pic {
          position: relative;
          float: left;
          width: 70px;
          height: 85px;
          margin-left: -100%;
          left: -90px;
        }
        .order-mid {
          position: relative;
          float: left;
          width: 100%;
          height: 100%; //   line-height: 25px;
          p {
            line-height: 15px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          span {
            color: rgb(190, 190, 190);
            margin-top: 10px;
            display: inline-block;
          }
        }
        .order-right {
          text-align: right;
          position: relative;
          vertical-align: top;
          float: right;
          width: 65px;
          height: 100%;
          margin-left: -190px;
          right: -90px;
          line-height: 25px;
          span {
            color: rgb(190, 190, 190);
            float: right;
          }
          .count {
            text-decoration: line-through;
          }
          button {
            width: 65px;
            height: 25px;
            display: inline-block;
            border: 1px solid #CECECE;
            background-color: #F0F0F0;
            border-radius: 2px;
            margin-top: 15px;
          }
        }
      }
      .price {
        padding: 10px 10px;
        border-bottom: 1px solid #EAEEF1;
        p {
          color: #000;
          font-size: 14px;
          line-height: 20px;
          span {
            font-size: 12px;
            color: #A1A1A1;
          }
        }
      }
      .tell-box {
        padding: 15px;
        .tell {
          line-height: 32px;
          border: 1px solid #979797;
          text-align: center;
        }
      }
    }
  }
  .info {
    padding-left: 10px;
    background-color: #fff;
    h3 {
      height: 44px;
      line-height: 44px;
      font-size: 14px;
      border-bottom: 1px solid #E0E6EA;
    }
    p {
      height: 44px;
      line-height: 44px;
      border-bottom: 1px dashed #E0E6EA;
      overflow: hidden;
      .left {
        float: left;
        width: 30%;
      }
      .right {
        float: left;
        color: #A1A1A1;
      }
    }
    .explain {
      height: auto;
      .right {
        width: 60%;
      }
    }
    .proof {
      padding-bottom: 45px;
      span {
        line-height: 44px;
      }
      .imgList {
        overflow: hidden;
        .imgBox {
          height: 21.5%;
          width: 21.5%;
          float: left;
          margin-right: 10px;
          margin-bottom: 10px;
          display: table-cell;
          text-align: center;
          img{
            height: 100px;
          }
        }
        .imgBox:ntd-child(4n) {
          margin-right: 0;
        }
      }
    }
  }
  .btn-box {
    background-color: #fff;
    height: 45px;
    padding: 0 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
    -moz-box-shadow: 0px -2px 1px #EAEEF1;
    -webkit-box-shadow: 0px -2px 1px #EAEEF1;
    box-shadow: 0px -2px 1px #EAEEF1;
    display: flex;
    button {
      background-color: #fff;
      flex: 1;
      color: #7C7C7C;
    }
  }
}
</style>
